<template>
  <div class="warp">
 <!--   <div class="banner">
      <div class="alarm-num">
        当前报警
        <span>{{alarmNum}}</span>
      </div>
      <div class="alarmClass">
        <ul v-for="(item,index) in alarmClass" :key="index">
          &lt;!&ndash; <li><i class="icon" :class="item.alarmIcon"></i>{{item.alarmName}}</li> &ndash;&gt;
          <li>
            <el-tooltip class="item" effect="dark" :content="item.alarmName" placement="bottom"><i class="icon"
                                                                                                   :class="item.alarmIcon"
                                                                                                   title></i>
            </el-tooltip>
          </li>
        </ul>
      </div>
    </div>-->
      <div></div>
    <div class="alarm-map">
      <Village-alarm :mapList="mapList"></Village-alarm>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import FontIcon from '../../../../../assets/styles/iconfont.css'
import TimeDate from '../../../../../components/common/ui/TimeDate'
import VillageAlarm from '../components/alarm'

export default {
  name: 'alarmMap',
  components: {
    FontIcon,
    TimeDate,
    VillageAlarm
  },
  props: ['deptId'],
  data () {
    return {
      alarmNum: '', // 今日报警数量
      alarmClass: [], // 告警数据
      mapList: [], // 地图坐标点数据
      alarmNameTitle: '' // 告警类别名称
    }
  },
  computed: {
    ...mapState({
      warnAllData: state => state.event.warnAllData
    })
  },
  watch: {
    deptId (val) {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      if (!this.deptId) {
        return
      }

      let _this = this
      // let url = this.$base.getUrl('getEventInfo')
      let url = this.$base.getUrl('getEventListByDeptId')

      let params = {
        url: url,
        data: {
          'deptId': this.deptId
        }
      }

      this.$store.dispatch('getForm', params).then((res) => {
        _this.mapList = res
        _this.alarmList = res
      })

      this.handleGetCurrentAlermNum()
      this.handleGetAlermIcon()
    },
    // 拉取当前设备信息
    handleGetAlermIcon () {
      // let url = this.$base.getUrl('getAlertNum')
      // let params = {
      //   url: url,
      //   data: {
      //     'deptId': this.deptId
      //   }
      // }
      // this.$store.dispatch('getForm', params).then(res => {
      //   if (res) {
      //     let moduleNameArr = []
      //     res.forEach((item, index) => {
      //       moduleNameArr.push({
      //         alarmName: item.moduleName,
      //         alarmIcon: item.moduleImage
      //       })
      //     })
      //   }
      // })
    },
    // 拉取告警数
    handleGetCurrentAlermNum () {
      let url = this.$base.getUrl('getCountByState')
      let params = {
        url: url,
        data: {
          deptId: this.deptId,
          limit: 999,
          page: 0
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.alarmNum = res > 0 ? res : '0'
      })
    }

  }
}
</script>
<style lang="less" scoped>
  .skin-white {
    .warp {
      color: #4C6072 !important;
    }
  }

  .warp {
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
  }

  .clearfix {
    clear: both;
  }

  .banner {
    width: 100%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
  }

  .alarm-num {
    margin-left: 20px;
    display: inline-block;
  }

  .alarm-num span {
    margin-left: 5px;
    color: #f5a623;
    font-size: 16px;
  }

  .alarmClass {
    float: right;
    margin-right: 20px;
    ul {
      float: right;
      list-style: none;
      li {
        margin-left: 12px;
        i {
          color: #50E3C2;
          margin-right: 6px;
        }
      }
    }
  }

  .alarm-map {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

</style>
